2023/12/232487字符

动画

HTML

<button class="hide">隐藏</button>
<button class="show">显示</button>
<button class="toggle">显示隐藏</button>
<button class="fadeIn">淡出</button>
<button class="fadeOut">淡入</button>
<button class="fadeToggle">淡入淡出</button>
<button class="fadeTo">指定透明度</button>
<button class="slideUp">收起</button>
<button class="slideDown">放下</button>
<button class="slideToggle">收起放下</button>
<div style="width:100px;height:100px;background:#f00;"></div>
<button class="stop1">停止当前动画</button>
<button class="stop2">停止所有动画</button>
<button class="stop3">清除动画</button>
<div class="box" style="position:absolute;width:100px;height:100px;background:#ff0;"></div>

隐藏显示

$(".hide").click(function () {
                // 动画时间、动画方式、执行函数
    $("div").hide(1000, 'swing', function () {  // 隐藏显示元素，动画结束后打印
        console.log("hide");  //--> hide
    });
});
$(".show").click(function () {
    $("div").show(1000);  // 显示隐藏元素
});
$(".toggle").click(function () {
    $("div").toggle(1000);  // 切换隐藏显示（可绑定多个事件）
});

淡入淡出

$(".fadeIn").click(function () {
    $("div").fadeIn(1000);  // 淡出
});
$(".fadeOut").click(function () {
    $("div").fadeOut(1000);  // 淡入
});
$(".fadeToggle").click(function () {
    $("div").fadeToggle(1000);  // 淡入淡出
});
$(".fadeTo").click(function () {
    $("div").fadeTo(1000, 0.3);  // 指定透明度
});

卷帘

$(".slideUp").click(function () {
    $("div").slideUp(1000);  // 收起
});
$(".slideDown").click(function () {
    $("div").slideDown(1000);  // 放下
});
$(".slideToggle").click(function () {
    $("div").slideToggle(1000);  // 收起放下
});

animate

$(".box").delay(2000).animate({right:"0"}, 3000).animate({bottom:"0"}, 2000, function () {  // delay(); 延迟
    console.log("animate");
});

停止动画

$(".stop1").click(function () {
    $(".box").stop();  // 停止当前动画
});
$(".stop2").click(function () {
    $(".box").stop(true);  // 停止所有动画
});
$(".stop3").click(function () {
    $(".box").stop(true,true);  // 停止当前动画直达终点，并取消之后动画
});

jQuery.fx.off = true;  // 动画开关